<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<link rel="shortcut icon" href="img/favicon.ico">
	</head>
	<body>
		<form action="#" method="post">
			<h2>请填写以下注册信息</h2>

			<p>用户名：
				<input type="text" name="userName" required pattern="[a-z]{4,6}" placeholder=" 请输入用户名" />*请输入4-6位的英文字符
			</p>

			<p>
				密&nbsp;&nbsp;&nbsp;码：
				<input type="password" name="userPwd" required pattern="[0-9]{6}" placeholder=" 请输入密码" />*请输入6位的数字
			</p>

			<p>手机号码:
				<input type="text" name="phone" required pattern="^1[3-9]\d{9}$" />
			</p>

			<!-- <p>身份证:
				<input type="text" name="phone" required
					pattern="^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$" />
			</p> -->

			<p>
				性&nbsp;&nbsp;&nbsp;别：
				<input type="radio" name="sex" checked />男
				<input type="radio" name="sex" />女
			</p>

			<p>爱&nbsp;&nbsp;&nbsp;好：
				<input type="checkbox" />唱
				<input type="checkbox" />跳
				<input type="checkbox" />rap
				<input type="checkbox" />唱
				<input type="checkbox" />篮球
			</p>

			<p>籍&nbsp;&nbsp;&nbsp;贯：
				<select>
					<option>江苏</option>
					<option selected>安徽</option>
				</select>省
				<select>
					<option>南京</option>
					<option selected>合肥</option>
				</select>市
			</p>

			<p>个人介绍：
				<textarea rows="7" cols="25">全民制作人们大家好，我是练习时长两年半的个人练习生，喜欢唱，跳，rap,篮球，music~</textarea>
			</p>

			<p>上传头像：
				<input type="file" />
			</p>

			<p>出生日期：
				<input type="date" />
			</p>

			<p>邮箱地址：
				<input type="email" />
			</p>

			<p>个人网站：
				<input type="url" />
			</p>

			<p>数字：
				<input type="number" max="5" min="1" step="1" value="1" />
			</p>

			<p>滑块：
				<input type="range" name="hua" />
			</p>

			<!--隐藏域  -->
			<input type="hidden">

			<!-- 图片按钮 -->
			<input type="image" src="./img/Gift.jpg">

			<p>
				<input type="button" value="普通按钮" onclick="alert(hua.value)" />
				<input type="submit" value="提交按钮" />
				<input type="reset" value="重置按钮" />
			</p>


		</form>
	</body>
</html>
